<template>
  <div class="hello">
    <h1>Search github User</h1>
    <input
      type="text"
      v-model="data"
      placeholder="可以按下回车键"
      @keydown.enter="getData"
    />
    <button @click="getData">搜索</button>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      data: "",
    };
  },
  methods: {
    getData() {
      if (
        this.data == null ||
        this.data.trim() == null ||
        this.data.length == 0
      ) {
        alert("输入为空，请重试！！！");
        return;
      }
      this.$bus.$emit("load", true, null);
      this.$http
        .get(`https://api.github.com/search/users?q=${this.data}`)
        .then((res) => {
          this.$bus.$emit("updataData", res.data.items);
        })
        .catch((error) => {
          this.$bus.$emit("updataData", null);
          this.$bus.$emit("load", false, error.message);
          console.log(error.message);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  padding: 50px;
  text-align: center;
}
input {
  height: 50px;
  width: 500px;
}
button {
  height: 55px;
  margin-left: 10px;
}
</style>
